<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人数据 - 连连看游戏系统</title>
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <style>
        body {
            background: var(--primary-gradient);
        }

        .stats-container {
            max-width: 1200px;
            margin: 90px auto 40px;
            padding: 0 var(--spacing-lg);
        }

        .stats-header {
            background: var(--bg-white);
            border-radius: var(--radius-xl);
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-lg);
            box-shadow: var(--shadow-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-xl);
        }

        .stats-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid var(--primary-color);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        }

        .stats-user-info h2 {
            font-size: 28px;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: var(--spacing-xs);
        }

        .stats-user-info p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }

        .stat-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: var(--spacing-xl);
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            border-left: 4px solid var(--primary-color);
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .stat-card.success {
            border-left-color: var(--success-color);
        }

        .stat-card.warning {
            border-left-color: var(--warning-color);
        }

        .stat-card.danger {
            border-left-color: var(--danger-color);
        }

        .stat-card.info {
            border-left-color: var(--info-color);
        }

        .stat-icon {
            font-size: 42px;
            margin-bottom: var(--spacing-sm);
            display: block;
        }

        .stat-value {
            font-size: 36px;
            font-weight: 700;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: var(--spacing-xs);
        }

        .stat-card.success .stat-value {
            background: linear-gradient(135deg, var(--success-color) 0%, #52b030 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-card.warning .stat-value {
            background: linear-gradient(135deg, var(--warning-color) 0%, #d19020 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-card.danger .stat-value {
            background: linear-gradient(135deg, var(--danger-color) 0%, #e04848 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .chart-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: var(--spacing-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: var(--spacing-lg);
        }

        .chart-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-lg);
            padding-bottom: var(--spacing-sm);
            border-bottom: 2px solid var(--border-light);
        }

        .progress-bar {
            background: var(--bg-gray-light);
            height: 12px;
            border-radius: 6px;
            overflow: hidden;
            margin: var(--spacing-sm) 0;
        }

        .progress-fill {
            height: 100%;
            background: var(--primary-gradient);
            border-radius: 6px;
            transition: width 1s ease;
        }

        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-xs);
            font-size: 14px;
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            color: var(--bg-white);
            text-decoration: none;
            padding: var(--spacing-sm) var(--spacing-lg);
            background: rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-md);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            margin-bottom: var(--spacing-lg);
        }

        .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateX(-4px);
        }

        .empty-state {
            text-align: center;
            padding: var(--spacing-xl);
            color: var(--text-tertiary);
        }

        .empty-state-icon {
            font-size: 64px;
            margin-bottom: var(--spacing-md);
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">🎮 LinkUp 连连看</div>
            <div class="nav-menu">
                <a th:href="@{/user/home}">首页</a>
                <a th:href="@{/user/rank}">排行榜</a>
                <a th:href="@{/user/shop}">道具商店</a>
                <a href="#" class="active">个人数据</a>
                <a th:href="@{/user/logout}">退出</a>
            </div>
        </div>
    </nav>

    <div class="stats-container">
        <a th:href="@{/user/home}" class="back-btn">
            <span>←</span>
            <span>返回主页</span>
        </a>

        <!-- 用户信息卡片 -->
        <div class="stats-header">
            <img th:src="${user.avatar}" alt="头像" class="stats-avatar">
            <div class="stats-user-info">
                <h2 th:text="${user.nickname}">玩家昵称</h2>
                <p>账号：<span th:text="${user.account}">account</span></p>
                <p>加入时间：<span th:text="${#temporals.format(user.createTime, 'yyyy年MM月dd日')}">2024-01-01</span></p>
            </div>
        </div>

        <!-- 核心数据统计 -->
        <div class="stats-grid">
            <div class="stat-card">
                <span class="stat-icon">🏆</span>
                <div class="stat-value" id="totalScore" th:text="${user.totalScore}">0</div>
                <div class="stat-label">总积分</div>
            </div>

            <div class="stat-card success">
                <span class="stat-icon">🎮</span>
                <div class="stat-value" id="gameCount" th:text="${user.gameCount}">0</div>
                <div class="stat-label">游戏场次</div>
            </div>

            <div class="stat-card warning">
                <span class="stat-icon">✨</span>
                <div class="stat-value" id="winCount" th:text="${user.winCount}">0</div>
                <div class="stat-label">胜利场次</div>
            </div>

            <div class="stat-card danger">
                <span class="stat-icon">💥</span>
                <div class="stat-value" id="maxCombo" th:text="${user.maxCombo}">0</div>
                <div class="stat-label">最大连击</div>
            </div>
        </div>

        <!-- 详细统计 -->
        <div class="chart-card">
            <h3 class="chart-title">📊 详细统计数据</h3>
            
            <div style="margin-bottom: var(--spacing-xl);">
                <div class="progress-label">
                    <span>胜率</span>
                    <span id="winRateText">0%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="winRateBar" style="width: 0%;"></div>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg);">
                <div>
                    <div class="progress-label">
                        <span>平均得分</span>
                        <span id="avgScore">0</span>
                    </div>
                </div>
                <div>
                    <div class="progress-label">
                        <span>最高得分</span>
                        <span id="maxScore">0</span>
                    </div>
                </div>
                <div>
                    <div class="progress-label">
                        <span>失败场次</span>
                        <span id="loseCount" th:text="${user.loseCount}">0</span>
                    </div>
                </div>
                <div>
                    <div class="progress-label">
                        <span>总游戏时长</span>
                        <span id="totalGames" th:text="${user.gameCount} + '局'">0局</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成就展示（未来功能） -->
        <div class="chart-card">
            <h3 class="chart-title">🏅 成就系统</h3>
            <div class="empty-state">
                <div class="empty-state-icon">🚧</div>
                <p>成就系统正在开发中，敬请期待！</p>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 LinkUp 连连看. All rights reserved.</p>
            <p>持续进步，不断超越自我！</p>
        </div>
    </footer>

    <script>
        // 页面加载后获取详细统计数据
        window.addEventListener('load', function() {
            loadStatsData();
        });

        function loadStatsData() {
            fetch('/user/stats/data')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        const stats = data.data;
                        const gameStats = stats.gameStats;
                        
                        // 更新胜率
                        const winRate = parseFloat(stats.winRate);
                        document.getElementById('winRateText').textContent = winRate.toFixed(1) + '%';
                        document.getElementById('winRateBar').style.width = winRate + '%';
                        
                        // 更新平均分和最高分
                        document.getElementById('avgScore').textContent = stats.avgScore;
                        document.getElementById('maxScore').textContent = gameStats.maxScore || 0;
                        
                        // 动画效果
                        animateNumbers();
                    }
                })
                .catch(error => {
                    console.error('加载统计数据失败:', error);
                });
        }

        function animateNumbers() {
            // 简单的数字动画效果
            const elements = document.querySelectorAll('.stat-value');
            elements.forEach(el => {
                const target = parseInt(el.textContent);
                let current = 0;
                const increment = target / 30;
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                        el.textContent = target;
                        clearInterval(timer);
                    } else {
                        el.textContent = Math.floor(current);
                    }
                }, 30);
            });
        }
    </script>
</body>
</html>
